import React, { useState, useEffect } from 'react';
import styles from './css/TopSearch.module.scss';
import { Input, Select, DatePicker, Radio, Button } from 'antd';
import {
  ConsoleSqlOutlined,
  DownOutlined,
  UserAddOutlined,
  UserDeleteOutlined,
} from '@ant-design/icons';

const items_sex = [
  {
    value: 'true',
    label: '男',
  },
  {
    value: 'false',
    label: '女',
  },
];

const items_vip = [
  {
    value: '1',
    label: 'vip1',
  },
  {
    value: '2',
    label: 'vip2',
  },
  {
    value: '3',
    label: 'vip3',
  },
];
const items_create = [
  {
    value: '1',
    label: '一级',
  },
  {
    value: '2',
    label: '二级',
  },
  {
    value: '3',
    label: '三级',
  },
];

const item_audit = [
  {
    value: 'true',
    label: '已审核通过',
  },
  {
    value: 'false',
    label: '未审核通过',
  },
];
const items_page = [
  {
    value: '1',
    label: '首页',
  },
  {
    value: '2',
    label: '第二页',
  },
  {
    value: '3',
    label: '第三页',
  },
  {
    value: '4',
    label: '第四页',
  },
];
const items_department = [
  {
    value: '1',
    label: '总部门',
  },
  {
    value: '2',
    label: '部门一',
  },
  {
    value: '3',
    label: '部门二',
  },
  {
    value: '4',
    label: '部门三',
  },
];

const TopSearch = (props: any) => {
  const [phone, SetPhone] = useState(''); //手机号
  const [username, SetUsername] = useState(''); //用户名
  const [actor_name, SetActor_name] = useState(''); //演员名
  const [customerservice_name, SetCustomerservice_name] = useState(''); //客服名
  const [sex, SetSex] = useState(''); //性别
  const [vip, SetVip] = useState(''); //vip
  const [create, SetCreate] = useState(''); //创建等级
  const [anchor, SetAnchor] = useState(''); //开播次数
  const [title, SetTitle] = useState(''); //标题
  const [uploader, SetUploader] = useState(''); //上传者
  const [audit_status, SetAudit_status] = useState(''); //审核状态
  const [sort, SetSort] = useState(''); //分类
  const [advertisement, SetAdvertisement] = useState(''); //广告名称
  const [level, SetLevel] = useState(''); //等级标题
  const [gift, SetGift] = useState(''); //礼物名称
  const [owningpage, SetOwningpage] = useState(''); //所属页面
  const [channel_name, SetChannel_name] = useState(''); //频道名称
  const [tag_name, SetTag_name] = useState(''); //标签名称
  const [sort_name, SetSort_name] = useState(''); //分类名
  const [section_name, SetSection_name] = useState(''); //分区名
  const [superior_department, SetSuperior_department] = useState(''); //上级部门
  const [role_group, SetRole_group] = useState(''); //角色组
  const [create_time, SetCreate_time] = useState([]); //创建时间
  const [authentication_time, SetAuthentication_time] = useState([]); //认证时间
  const [publish_time, SetPublish_time] = useState([]); //发布时间
  const [examine_time, SetExamine_time] = useState([]); //审核时间
  const [trading_time, SetTrading_time] = useState([]); //交易时间
  const [creation_time, SetCreation_time] = useState([]); //创建时间
  const [report_time, SetReport_time] = useState([]); //举报时间
  const [all, SetAll] = useState({
    phone: phone,
    username: username,
    actor_name: actor_name,
    customerservice_name: customerservice_name,
    sex: sex,
    vip: vip,
    create: create,
    anchor: anchor,
    title: title,
    uploader: uploader,
    audit_status: audit_status,
    sort: sort,
    advertisement: advertisement,
    level: level,
    gift: gift,
    owningpage: owningpage,
    channel_name: channel_name,
    tag_name: tag_name,
    sort_name: sort_name,
    section_name: section_name,
    superior_department: superior_department,
    create_time:create_time,
    authentication_time:authentication_time,
    publish_time:publish_time,
    examine_time:examine_time,
    trading_time:trading_time,
    creation_time:creation_time,
    report_time:report_time,
  }); //全部

  const newAll = {
    ...all,
    // phone: phone,
    username: username,
    // actor_name: actor_name,
    // customerservice_name: customerservice_name,
    // sex: sex,
    // vip: vip,
    // create: create,
    // anchor: anchor,
    // title: title,
    // uploader: uploader,
    // audit_status: audit_status,
    // sort: sort,
    // advertisement: advertisement,
    // level: level,
    create_time:create_time,
    // authentication_time:authentication_time,
    // publish_time:publish_time,
    // examine_time:examine_time,
    // trading_time:trading_time,
    // creation_time:creation_time,
    // report_time:report_time,
  };
  
  function sonTo(all:any){
    props.sonTofather(all);

  };

  
  useEffect(() => {
    SetAll(newAll);
  },[phone, username, actor_name, customerservice_name, sex, vip, create, anchor, title, uploader, audit_status, sort, advertisement, level]);

  const { RangePicker } = DatePicker;
  const onSearch = (value: string) => {
    console.log('search:', value);
  };
  const placementChange = (e) => {
    console.log(e.target.value,123231);
    console.log(123231, e);
  };



  const onChange_sex = (value: string) => {
    console.log(`selected ${value}`);
    SetSex(value);
  };
  const onChange_vip = (value: string) => {
    console.log(`selected ${value}`);
    SetVip(value);
  };
  const onChange_create = (value: string) => {
    console.log(`selected ${value}`);
    SetCreate(value);
  };
  const onChange_audit_status = (value: string) => {
    console.log(`selected ${value}`);
    SetAudit_status(value);
  };
  const onChange_sort = (value: string) => {
    console.log(`selected ${value}`);
    SetSort(value);
  };
  const onChange_owningpage = (value: string) => {
    console.log(`selected ${value}`);
    SetOwningpage(value);
  };
  const onChange_superior_department = (value: string) => {
    console.log(`selected ${value}`);
    SetSuperior_department(value);
  };

  return (
    <div>
      <h1>{props.topName}</h1>
      <div className={styles.all}>
        <div className={styles.all_input}>
          {props.username ? (
            <div className={styles.input_one}>
              <p>{props.username}</p>
              <Input
                placeholder='请输入用户名'
                style={{ width: '60%' }}
                value={username}
                onChange={(e) => {
                  console.log(e.target.value);
                  SetUsername(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.actor_name ? (
            <div className={styles.input_one}>
              <p>{props.actor_name}</p>
              <Input
                placeholder='请输入演员名'
                style={{ width: '60%' }}
                value={actor_name}
                onChange={(e) => {
                  SetActor_name(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.customerservice_name ? (
            <div className={styles.input_one}>
              <p>{props.customerservice_name}</p>
              <Input
                placeholder='请输入客服名'
                style={{ width: '60%' }}
                value={customerservice_name}
                onChange={(e) => {
                  SetCustomerservice_name(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.phone ? (
            <div className={styles.input_one}>
              <p>{props.phone}</p>
              <Input
                placeholder='请输入用户手机号'
                style={{ width: '60%' }}
                value={phone}
                onChange={(e) => {
                  SetPhone(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.sex ? (
            <div className={styles.input_one}>
              <p>{props.sex}</p>
              <Select
                showSearch
                placeholder='请输入用户性别'
                optionFilterProp='label'
                onChange={onChange_sex}
                onSearch={onSearch}
                options={items_sex}
              />
            </div>
          ) : (
            ''
          )}
          {props.vip ? (
            <div className={styles.input_one}>
              <p>{props.vip}</p>
              <Select
                showSearch
                placeholder='请输入用户等级'
                optionFilterProp='label'
                onChange={onChange_vip}
                onSearch={onSearch}
                options={items_vip}
              />
            </div>
          ) : (
            ''
          )}
          {props.create ? (
            <div className={styles.input_one}>
              <p>{props.create}</p>
              <Select
                showSearch
                placeholder='请输入创建者等级'
                optionFilterProp='label'
                onChange={onChange_create}
                onSearch={onSearch}
                options={items_create}
              />
            </div>
          ) : (
            ''
          )}
          {props.anchor ? (
            <div className={styles.input_one}>
              <p>{props.anchor}</p>
              <Input
                placeholder='请输入开播次数'
                style={{ width: '60%' }}
                value={anchor}
                onChange={(e) => {
                  SetAnchor(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}

          {/* 以上是内容管理 */}
          {props.title ? (
            <div className={styles.input_one}>
              <p>{props.title}</p>
              <Input
                placeholder='请输入标题'
                style={{ width: '60%' }}
                value={title}
                onChange={(e) => {
                  SetTitle(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.uploader ? (
            <div className={styles.input_one}>
              <p>{props.uploader}</p>
              <Input
                placeholder='请输入上传者'
                style={{ width: '60%' }}
                value={uploader}
                onChange={(e) => {
                  SetUploader(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.audit_status ? (
            <div className={styles.input_one}>
              <p>{props.audit_status}</p>
              <Select
                showSearch
                placeholder='请输入审核状态'
                optionFilterProp='label'
                onChange={onChange_audit_status}
                onSearch={onSearch}
                options={item_audit}
              />
            </div>
          ) : (
            ''
          )}
          {props.sort ? (
            <div className={styles.input_one}>
              <p>{props.sort}</p>
              <Select
                showSearch
                placeholder='请输入排序'
                optionFilterProp='label'
                onChange={onChange_sort}
                onSearch={onSearch}
                options={item_audit}
              />
            </div>
          ) : (
            ''
          )}

          {props.advertisement ? (
            <div className={styles.input_one}>
              <p>{props.advertisement}</p>
              <Input
                placeholder='请输入广告名称'
                style={{ width: '60%' }}
                value={advertisement}
                onChange={(e) => {
                  SetAdvertisement(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.level ? (
            <div className={styles.input_one}>
              <p>{props.level}</p>
              <Input
                placeholder='请输入等级标题'
                style={{ width: '60%' }}
                value={level}
                onChange={(e) => {
                  SetLevel(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.gift ? (
            <div className={styles.input_one}>
              <p>{props.gift}</p>
              <Input
                placeholder='请输入礼物名称'
                style={{ width: '60%' }}
                value={gift}
                onChange={(e) => {
                  SetGift(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}

          {props.owningpage ? (
            <div className={styles.input_one}>
              <p>{props.owningpage}</p>
              <Select
                showSearch
                placeholder='请输入所属页面'
                optionFilterProp='label'
                onChange={onChange_owningpage}
                onSearch={onSearch}
                options={items_page}
              />
            </div>
          ) : (
            ''
          )}

          {props.channel_name ? (
            <div className={styles.input_one}>
              <p>{props.channel_name}</p>
              <Input
                placeholder='请输入频道名称'
                style={{ width: '60%' }}
                value={channel_name}
                onChange={(e) => {
                  SetChannel_name(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.tag_name ? (
            <div className={styles.input_one}>
              <p>{props.tag_name}</p>
              <Input
                placeholder='请输入标签名称'
                style={{ width: '60%' }}
                value={tag_name}
                onChange={(e) => {
                  SetTag_name(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.sort_name ? (
            <div className={styles.input_one}>
              <p>{props.sort_name}</p>
              <Input
                placeholder='请输入排序名称'
                style={{ width: '60%' }}
                value={sort_name}
                onChange={(e) => {
                  SetSort_name(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.section_name ? (
            <div className={styles.input_one}>
              <p>{props.section_name}</p>
              <Input
                placeholder='请输入排序名称'
                style={{ width: '60%' }}
                value={section_name}
                onChange={(e) => {
                  SetSection_name(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}
          {props.superior_department ? (
            <div className={styles.input_one}>
              <p>{props.superior_department}</p>
              <Select
                showSearch
                placeholder='请输入所属部门'
                optionFilterProp='label'
                onChange={onChange_superior_department}
                onSearch={onSearch}
                options={items_department}
              />
            </div>
          ) : (
            ''
          )}
          {props.role_group ? (
            <div className={styles.input_one}>
              <p>{props.role_group}</p>
              <Input
                placeholder='请输入排序名称'
                style={{ width: '60%' }}
                value={role_group}
                onChange={(e) => {
                  SetRole_group(e.target.value);
                }}
              />
            </div>
          ) : (
            ''
          )}

          {props.create_time ? (
            <div className={styles.input_one_time}>
              <p>{props.create_time}</p>
              <RangePicker
                placement='topLeft'
                onChange ={(date, dateString)=>{
                  // console.log(date, dateString,1233211231);
                  SetCreate_time([...dateString]);
                }}
                style={{ width: '1.6rem' }}
              />
            </div>
          ) : (
            ''
          )}
          {props.authentication_time ? (
            <div className={styles.input_one_time}>
              <p>{props.authentication_time}</p>
              <RangePicker
                placement='topLeft'
                onChange ={(date, dateString)=>{
                  console.log(date, dateString);
                  SetAuthentication_time([...authentication_time]);
                }}
                style={{ width: '1.6rem' }}
              />
            </div>
          ) : (
            ''
          )}

          {props.publish_time ? (
            <div className={styles.input_one_time}>
              <p>{props.publish_time}</p>
              <RangePicker
                placement='topLeft'
                onChange ={(date, dateString)=>{
                  console.log(date, dateString);
                  SetPublish_time([...publish_time]);
                }}
                style={{ width: '1.6rem' }}
              />
            </div>
          ) : (
            ''
          )}
          {props.examine_time ? (
            <div className={styles.input_one_time}>
              <p>{props.examine_time}</p>
              <RangePicker
                placement='topLeft'
                onChange ={(date, dateString)=>{
                  console.log(date, dateString);
                  SetExamine_time([...examine_time]);
                }}
                style={{ width: '1.6rem' }}
              />
            </div>
          ) : (
            ''
          )}
          {props.trading_time ? (
            <div className={styles.input_one_time}>
              <p>{props.trading_time}</p>
              <RangePicker
                placement='topLeft'
                onChange ={(date, dateString)=>{
                  console.log(date, dateString);
                  SetTrading_time([...trading_time]);
                }}
                style={{ width: '1.6rem' }}
              />
            </div>
          ) : (
            ''
          )}
          {props.creation_time ? (
            <div className={styles.input_one_time}>
              <p>{props.creation_time}</p>
              <RangePicker
                placement='topLeft'
                onChange ={(date, dateString)=>{
                  console.log(date, dateString);
                  SetCreation_time([...creation_time]);
                }}
                style={{ width: '1.6rem' }}
              />
            </div>
          ) : (
            ''
          )}
          {props.report_time ? (
            <div className={styles.input_one_time}>
              <p>{props.report_time}</p>
              <RangePicker
                placement='topLeft'
                onChange ={(date, dateString)=>{
                  console.log(date, dateString);
                  SetReport_time([...report_time]);
                }}
                style={{ width: '1.6rem' }}
              />
            </div>
          ) : (
            ''
          )}
        </div>
        <div className={styles.button_input}>
          {props.button_one ? (
            <Button
              color='primary'
              variant='solid'
              onClick={() => {
                //点击按钮时将所有变量放入all对象中
                sonTo(all);
                // console.log(all);
              }}
            >
              {props.button_one}
            </Button>
          ) : (
            ''
          )}
          {props.button_two ? (
            <Button color='primary' variant='solid'>
              {props.button_two}
            </Button>
          ) : (
            ''
          )}
          {props.button_three ? (
            <Button color='danger' variant='solid'>
              {props.button_three}
            </Button>
          ) : (
            ''
          )}
        </div>
      </div>
    </div>
  );
};

export default TopSearch;
